<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>余额查询</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
    <h2 class="mb-4">余额查询</h2>
    <form id="balanceForm" class="row g-3">
        <div class="col-md-6">
            <label for="cardID" class="form-label">银行卡号</label>
            <input type="text" class="form-control" id="cardID" name="cardID" placeholder="请输入银行卡号" required>
        </div>
        <div class="col-12">
            <button type="button" class="btn btn-primary me-2" onclick="queryBalance()">查询余额</button>
            <button type="button" class="btn btn-secondary" onclick="resetForm()">重置</button>
            <a th:href="@{/customer/index}" class="btn btn-secondary ms-2">返回首页</a>
        </div>
    </form>

    <div class="mt-4" id="resultBox" style="display: none;">
        <h5>账户余额：</h5>
        <p id="balanceAmount" class="fs-4 text-success"></p >
    </div>
</div>

<script>
    function queryBalance() {
        const cardID = document.getElementById("cardID").value.trim();
        if (!cardID) {
            alert("请输入银行卡号！");
            return;
        }

        fetch('/trade/balance?cardID=' + encodeURIComponent(cardID), {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                'token': localStorage.getItem("token") || ''
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data.code === 200) {
                    document.getElementById("resultBox").style.display = "block";
                    document.getElementById("balanceAmount").innerText = data.data + " 元";
                } else {
                    alert("查询失败：" + data.msg);
                }
            });
    }

    function resetForm() {
        document.getElementById("cardID").value = "";
        document.getElementById("resultBox").style.display = "none";
        document.getElementById("balanceAmount").innerText = "";
    }
</script>
</body>
</html>